<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div id="app">


    <!--vue嵌套路由
		
		
    -->
	<!-- 展示路由组件标签 -->
	<router-view></router-view>
	
	<h1>点击下方按钮进行切换</h1>
	<a href="#/logintest">切换登录</a>
	<a href="#/resg?name=wpp&age=22">切换注册</a>
	<router-link :to="{path:'/resg?name=wpp&age=22'}">切换注册</router-link>
	</div>
	

</body>
</html>

<script src="resource/vue.js"></script>
<script src="resource/vue-router.js"></script>

<script>


//    //定义一个全局组件，参数1：组件名字，参数2：组件的配置对象
   Vue.component('login',{
       template:'<div><h2>登录界面----{{num}}----------{{msg}}</h2></div>',//推荐使用div包裹。因为需要有一个根节点
       data(){
           return{
               testnum:this.num,
               msg:"这是测试数据！！！！"
           }
       },
       props:['num'],

   });

    //局部组件也有自己的生命周期
    //此处定义一个局部loginTest组件，并在vue中直接注册
    const logintest = {
        template: '<div><h1>登录按钮---{{age}}-----{{agetest}}</h1><button @click="edittest">点击我修改父组件的内容</button></div>',//定义组件的html代码
        data(){     //局部组件中定义数据，只能是函数，然后加return，日后直接使用{{}}取值
            return {
                // msg:"这是登录方法",//通过return返回数据
                age:1000
            }
        },
        props:['agetest'],//父组件传过得来的数据不能直接改变，因为是单向数据流，子组件不能影响父组件
        methods:{
            edittest(){
                alert("子组件的事件")
                this.$emit('testparent',this.age);//调用父组件中的方法，并传递参数
            }
        }
    };
	
	//注册按钮组件
	const res = {
		template:'<div><h1>注册按钮</h1></div>',
		created(){
			console.log(this);
		},
	}
	
	const useradd={
		template:'<div><h1>用户添加</h1></div>',
	}

	//配置路由
	const router = new  VueRouter({
		routes:[
			{path:'/',redirect:'/logintest',
			 children:[
				 {path:'useradd',name:'useradd',component:useradd},//这是嵌套路由，前面不能有/线，并且包裹在children中
			 ]
			},
			{path:'/logintest',component:logintest},//配置路径
			{path:'/resg',component:res}
			
			]
		
	});
    //父组件
    const app = new Vue({
        el:"#app",
        data: {
            msg:"vue 组件使用",
            numdata:100
        },
		router:router,//注册路由对象
        methods:{
            test(count){
                alert("父组件"+count)
            }
        },
       
    });


</script>